<template>
	<view>
		<!-- <view v-if="type ===6">
			<weather />
		</view> -->
		<view class="cardlist" v-if="deviceList">
			<o-empty v-if="deviceList.length <= 0"></o-empty>
			<view class="card" v-for="(item,index) in deviceList" :key="index"
				@click="getDetail(item.id,item.deviceTitle,item.deviceSn)">
				<uni-card margin="6px">
					<!-- 头部 -->
					<view class="header">
						<view class="left">
							<view class="title">{{item.deviceTitle}}</view>
							<view class="number">{{item.deviceSn||'--'}}</view>
						</view>
						<view class="right" v-if="type===2">
							<view
								:class="item.workStatus==='0'?'circle_green':item.workStatus==='9999'?'circle_error':'circle_warn'">
							</view>
							<view>{{workStatus[item.workStatus]||'--'}}</view>
						</view>
					</view>
					<!-- 采集器参数部分 -->
					<view class="container" v-if="type ===0">
						<view class="params">
							<view class="name">所属电站</view>
							<view class="data">
								<text>{{item.stationName}}</text>
							</view>
						</view>
					</view>

					<!-- 逆变器参数部分 -->
					<view class="container" v-if="type ===1">
						<view class="params">
							<view class="name">当日发电量</view>
							<view class="data">
								<text class="number">{{item.todayEnergy||'--'}}</text>
								<text>kWh</text>
							</view>
						</view>
						<view class="params">
							<view class="name">发电功率(kW)</view>
							<view class="data">
								<text class="number">{{(item.gridPower/1e3).toFixed(2)||'--'}}</text>
								<text>kW</text>
							</view>
						</view>
						<view class="params">
							<view class="name">所属电站</view>
							<view class="data">
								<text>{{item.stationName||'--'}}</text>
							</view>
						</view>
						<view class="params">
							<view class="name">所属父设备</view>
							<view class="data">
								<text>{{item.parentName||'--'}}</text>
							</view>
						</view>
						<view class="params" style="width: 100%; padding: 5px 0;">
							<view class="name">安装位置</view>
							<view class="data">
								<text class="position">{{item.address||'--'}}</text>
							</view>
						</view>
					</view>

					<!-- 数据时间 -->
					<view class="warn_time">
						<text class="iconfont icon-rili"></text>
						<text style="padding: 0 10rpx;">数据更新时间</text>
						<text>{{item.lastCreateTime || '--'}}</text>
					</view>
				</uni-card>
			</view>
			<uni-fab ref="fab" :pattern="pattern" horizontal="right" vertical="bottom" direction="vertical"
				@fabClick="fabClick" v-if="flag==1" />
			<!-- 添加数采，底部弹出 -->
			<view class="create-folder">
				<uni-popup ref="popup" background-color="#fff">
					<view class="popup-content" style="height: 260px;">
						<view style="text-align: center;padding: 30px;font-weight: 700;">添加数采</view>
						<view style="padding: 20px;">
							<uni-forms ref="phone_form" :modelValue="deviceEntity" label-position="top" class="form">
								<uni-forms-item label="数采SN" name="number" class="forms-item">
									<uni-easyinput v-model="deviceEntity.deviceSn" type="text" placeholder="数采SN"
										@input="binddata('number',deviceEntity.deviceSn,'phone_form')" />
								</uni-forms-item>
								<button @click="saveDevice" class="button" type="primary">保存</button>
							</uni-forms>
						</view>
					</view>
				</uni-popup>
			</view>
			<!-- 警告框 -->
			<view>
				<uni-popup ref="message" type="message">
					<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
				</uni-popup>
			</view>
			<!-- 点击加载更多 -->
			<uni-load-more v-if="deviceList.length" :status="loadingStatus"></uni-load-more>
		</view>
		<o-empty v-else />
	</view>
</template>

<script>
	import {
		getDeviceQueryList,
		getDeviceQueryCount,
		saveDevice
	} from "@/common/api/api.js"
	import {
		workStatus
	} from '@/common/const/workStatus.js'
	export default {
		components: {
		},
		props: {
			type: Number,
			stationId: String, //电站Id
			refresh: Boolean,
			reach: Boolean,
			flag: {
				default: '0',
				type: String
			}, //如果为1则是从电站详情进来的，可以显示添加数采按钮
		},
		data() {
			return {
				pattern: { // 悬浮按钮
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				deviceEntity: {}, //要添加的数采
				msgType: 'success',
				messageText: '',
				deviceList: [],
				workStatus: null,
				loadingStatus: 'more',
				page: 1,
				count: 0
			}
		},
		created() {
			this.$nextTick(() => {
				this.getData()
			})
			this.workStatus = workStatus
		},
		watch: {
			refresh(n, o) {
				n && this.getData()
			},
			reach() {
				this.onReach()
			}
		},
		methods: {
			//上拉刷新处理
			async onReach() {
				if (!this.count) {
					return
				}
				if (Array.isArray(this.deviceList) && this.deviceList.length >= this.count) {
					return this.loadingStatus = 'no-more'
				}
				this.loadingStatus = 'loading'
				await new Promise(resolve => setTimeout(resolve, 300));
				const token = uni.getStorageSync('Token')
				let params = {
					token: token,
					deviceType: this.type + 1,
					page: this.page + 1,
					limit: 10
				}
				if (this.stationId) {
					params.stationId = this.stationId
				}
				let res = await getDeviceQueryList(params)
				if (Array.isArray(res.data) && res.data.length) {
					this.loadingStatus = 'more'
					this.page++
					this.deviceList = [...this.deviceList, ...res.data]
				} else {
					this.loadingStatus = 'no-more'
				}
			},
			async getData() {
				if (this.type === 6) {
					return
				}
				const token = uni.getStorageSync('Token')
				let params = {
					token: token,
					deviceType: this.type + 1,
					page: this.page,
					limit: 10
				}
				if (this.stationId) {
					params.stationId = this.stationId
				}
				let res = await getDeviceQueryList(params)
				this.deviceList = res.data
				if (Array.isArray(this.deviceList) && this.deviceList.length >= this.count) {
					this.loadingStatus = 'no-more'
				}
				let result = await getDeviceQueryCount(params)
				this.count = result.data
			},
			getDetail(did, title, sn) {
				let url;
				switch (this.type + 1) {
					case 1:
						url = `/pages/deviceDetail/harvesterDetail/index`
						break;
					case 2:
						url = `/pages/deviceDetail/inverterDetail/index`
						break;
					case 4:
						url = `/pages/deviceDetail/optimizerDetail/index`
						break;
					case 5:
						url = `/pages/deviceDetail/ammeterDetail/index`
						break;
					case 6:
						url = `/pages/deviceDetail/robotDetail/index`
						break;
					case 7:
						url = `/pages/deviceDetail/weatherStation/index`
						break;
					default:
						break;
				}
				url = url + `?did=${did}&title=${title}&sn=${sn}`
				uni.navigateTo({
					url
				})
			},
			fabClick(e) {
				this.$refs.popup.open('top')
			},
			// 保存设备
			saveDevice(val) {
				let sn = this.deviceEntity.deviceSn
				if (sn == undefined || sn.trim() == null || sn.trim() == '') {
					this.msgType = 'error'
					this.messageText = '数采SN不能为空'
					this.$refs.message.open()
					return
				}
				this.deviceEntity.stationId = this.stationId
				this.deviceEntity.deviceType = 1
				let that = this
				saveDevice(this.deviceEntity).then(res => {
					if (res.code == '000000') {
						that.msgType = 'success'
						that.messageText = '保存数采成功'
					} else {
						that.msgType = 'error'
						that.messageText = res.message
					}
					that.deviceEntity.deviceSn = ''
					that.$refs.popup.close()
					that.$refs.message.open()
				})
			},
		}
	}
</script>

<style scoped lang='scss'>
	.cardList {
		padding-bottom: 100rpx;
	}

	.card {
		margin-top: 16rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #333;
				}
			}

			.right {
				font-size: 20rpx;
				display: flex;
				align-items: center;

				.circle_green {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: lightgreen;
					margin-right: 10rpx;
				}

				.circle_warn {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #e49042;
					margin-right: 10rpx;
				}

				.circle_error {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #ff0000;
					margin-right: 10rpx;
				}
			}
		}

		/* 参数 */
		.container {
			border-top: 2rpx solid #ccc;
			margin-top: 12rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.params {
				width: 50%;
				padding: 10rpx 0;

				.name {
					font-size: 20rpx;
					color: #333;
				}

				.position {
					border-radius: 30px;
					padding: 1px 12px;
					background: #3f86f7e8;
					color: #fff;
				}

				.name4 {
					width: 160rpx;
					height: 60rpx;
					border: 1px solid #ccc;
					border-radius: 28rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 28rpx;
					margin-left: auto;
				}

				.data {
					.number {
						color: #333;
						font-weight: bold;
						padding-right: 12rpx;
					}
				}

				.data4 {
					.number {
						color: lightgreen;
						font-size: 24rpx;
						padding-right: 12rpx;
					}
				}
			}
		}
	}

	.warn_time {
		font-size: 24rpx;
		border-top: 2rpx solid #ccc;
	}

	.o-empty {
		background-color: $bg-color !important;
	}

	/deep/.uni-popup-message {
		height: 50px;
	}
</style>